pc-layout()
  @media screen and (min-width: 768px)
    {block}

sp-layout()
  @media screen and (max-width: 767px)
    {block}

/* 鼠标样式 */
cursor($imgUrl)
  cursor: $imgUrl, auto !important;

/* 自定义滚动条 */
scrollBar()
  ::-webkit-scrollbar
    width: 4px;
    height: 4px;
    background-color: transparent;
  ::-webkit-scrollbar-thumb
    border-radius: 4px;
    background-color: #986db2;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.4) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0.4) 75%,
      transparent 75%,
      transparent
    );
  ::-webkit-scrollbar-track
    background-color: #e2dfdf;

/* clip条 */
clip()
  color: white;
  text-transform: capitalize;
  background-image: linear-gradient(to right, $text-clip-start 10%, $text-clip-center 40%, $text-clip-end 70%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: textclip 3s linear infinite;

/* 卡片轮廓 */
card()
  border-radius: 3px;
  background-color: $bg-white-deep;
  +pc-layout()
    box-shadow: $card-shadow-base;
  +sp-layout()
    box-shadow: $card-shadow-light;

card-lignt()
  border-radius: 3px;
  background-color: $bg-white-dim;
  box-shadow: $card-shadow-light;
  transition: $transition-base;
  +pc-layout()
    &:hover
      transform: translateY(-4px);
      box-shadow: $card-shadow-light-hover;

card-page()
  border-radius: 3px;
  +pc-layout()
    background-color: $bg-white-dim;
    box-shadow: $card-shadow-base;

/* 绝对/固定 定位， 宽高占满父元素 */

fillParent($typeof,$zIndex)
  position: $typeof;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zIndex;

/* 居中 主轴水平 */
flexCenter()
  display: flex;
  justify-content: center;
  align-items: center;

/* 居中 主轴竖直 */
flexColumnCenter()
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
